<script setup>
// 从 vue 模块中导入 ref 、isRef 、unref 函数
import { ref, isRef, unref } from 'vue';
// 将一个 原始值 包裹成 Ref实例
const counter = ref( 1000 );
console.log( counter );
// 判断 counter 是否是 Ref
console.log( isRef( counter ) );

// 如果参数是一个 Ref，则返回内部值，否则返回参数本身。
// 这是 val = isRef(val) ? val.value : val 的语法糖函数。
const unwrapped = unref( counter );
console.log( unwrapped , typeof unwrapped );

function handler(){
    // 必须通过 value 属性来访问 counter 的内部值 
    counter.value++ ;
}

// 将一个 对象 包裹成 Ref实例
const whale = ref( { count: 100 } );
console.log( whale );

function increment(){
    // 必须通过 value 属性来访问 whale 的内部值
    whale.value.count++;
}
</script>

<template>
  <div class="wrapper">
      <!-- 在模板中使用 counter 相当于 counter.value -->
      <button @click="handler">{{ counter }}</button>
      <hr>
      <!-- 在模板中使用 whale 相当于 whale.value -->
      <button @click="increment">{{ whale.count }}</button>
      <p>问题: ref 与 reactive 有什么关系？有什么区别？</p>
  </div>
</template>

<style scoped>
.wrapper {
    margin: 15px;
    border: 1px solid #dedede;
    box-shadow: 0 0 20px -10px blue;
}
</style>